<template>
  <MyList :getList="getList" :resetList="resetList">
    <div class="item" v-for="item in list" :key="item.id">
      <div class="top">
        <span>订单号：{{ item.ordernum }}</span>
        <van-tag round :type="colorObj[item.status]">{{ statusObj[item.status] }}</van-tag>
      </div>
      <div class="content">
        <img :src="item.imgList[0]?.url" alt="" width="60">
        <div>
          <div>{{ item.title }}</div>
          <span>{{ item.msg }}</span>
        </div>
      </div>
      <div>
        <div class="time">
          <span>
            创建时间：
            <span style="color: #999;">
              {{ moment(item.createtime * 1).format("YYYY-MM-DD HH:mm:ss") }}
            </span>
          </span>
          <van-button v-if="item.status == 'b'" size="mini" @click="onOver(item)"
            style="vertical-align: bottom;color:orange;border:1px solid orange;border-radius: 15px;">确认收货</van-button>
        </div>
        <div>{{ item.receiveInfo }}</div>
      </div>
      <div class="footer">
        <span>共{{ item.sum }}件商品</span>，
        <span>合计 <span class="money">￥{{ item.total?.toFixed(2) }}</span></span>
      </div>
    </div>
  </MyList>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import MyList from "@/components/myList/index.vue"
import { getOrder, orderOver } from "@/api"
import { useStore } from "@/store"
import moment from "moment"
import { showToast, showConfirmDialog, showSuccessToast } from "vant"
const store = useStore();
const router = useRouter()
const { tag } = defineProps(["tag"]);
// status 1:待发货 2:待收货 3:已完成
const statusObj = {
  "a": "待发货",
  "b": "待收货",
  "c": "已完成"
}
const colorObj = {
  "a": "primary",
  "b": "warning",
  "c": "success"
}
const obj = {
  "all": undefined,
  "send": "a",
  "receive": "b",
  "complete": "c"
}
const list = ref([
  // {
  //   id: 1,
  //   ordernum: "131231", // 订单号
  //   status: "a", // 状态
  //   img: bg, // 图片
  //   title: "商品1",
  //   msg: "qerwerew", // 描述
  //   num: 231, // 数量总数
  //   sum: 12, // 商品总数
  //   creatTime: "2023-01-02 12:13:22", // 创建时间
  //   receiveInfo: "陈德勇, 18275341743, 浙江省 杭州市 西湖区 蒋村花园如意苑", // 用户信息
  //   goodsTotal: 32, // 商品总价
  //   total: 32, // 价格总数
  // },
])
const resetList = () => {
  list.value = []
}
const getList = async (index, t) => {
  if (store.istoken) {
    const { data, code, paginate } = await getOrder({
      page: index ? index : 1,
      size: 10,
      status: obj[t ? t : tag]
    })
    if (code == 200) {
      let arr = data.map(item => {
        item.imgList = JSON.parse(item.imgList)
        return item
      })
      arr.reverse()
      t ? list.value = arr : list.value.push(...arr)
      return {
        total: paginate.total,
        list: list.value
      }
    } else {
      return {
        total: list.value.length,
        list: list.value
      }
    }
  } else {
    return {
      total: list.value.length,
      list: list.value
    }
  }
}
const onOver = async (item) => {
  console.log(item);
  showConfirmDialog({
    title: '确认收货',
    message: '是否确认收货？',
  }).then(async () => {
    const { code, message } = await orderOver({ ...item, imgList: JSON.stringify(item.imgList), status: "c", id: item._id })
    if (code == 200) {
      showSuccessToast(message)
      getList(1, "receive")
    }
  })
}
</script>
<style lang="less" scoped>
.item {
  background-color: #eee;
  border-radius: 8px;
  padding: 10px 10px;
  margin-bottom: 20px;

  .top {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }

  .content {
    display: flex;
    // justify-content: space-between;

    img {
      border-radius: 8px;
      margin-right: 15px;
    }

    >div {
      flex: 1;

      div {
        margin-bottom: 10px;
        font-weight: 500;
      }

      span {
        color: #999;
      }
    }
  }

  .time {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
  }

  .footer {
    margin-top: 10px;
    text-align: right;
    font-size: 14px;
    color: #999;

    .money {
      color: #f00;
    }
  }

}
</style>
